<template>
	<div class="boss">
		<!-- <RouterLink :to="'shopInfo/'+item.id" tag = 'div' class="box"  v-for="item in shoplist" :key='item.id'>
			<div class="box-bs">
				<img :src="item.img_url" />
				<h4>{{item.title}}</h4>
				<div class="link-box">
					<div>
						<span class="price-one">$<span>{{item.sell_price}}</span></span><span class="price-two">$<span>{{item.market_price}}</span></span>
					</div>
					<div class="price-lit">
						<span>热卖中</span><span>剩<span>{{item.stock_quantity}}</span>件</span>
					</div>
				</div>
			</div>
		</RouterLink>	 -->
		<div class="box"  v-for="item in shoplist" :key='item.id' @click="enter(item.id)">
			<div class="box-bs">
				<img :src="item.img_url" />
				<h4>{{item.title}}</h4>
				<div class="link-box">
					<div>
						<span class="price-one">$<span>{{item.sell_price}}</span></span><span class="price-two">$<span>{{item.market_price}}</span></span>
					</div>
					<div class="price-lit">
						<span>热卖中</span><span>剩<span>{{item.stock_quantity}}</span>件</span>
					</div>
				</div>
			</div>
		</div>	
		<p class="div-land">
			<img class="img-land" src="../img/timg.gif" />
		</p>
	</div>
	
</template>

<script>
	import $ from 'jquery/dist/jquery.js'
	import {Toast} from 'mint-ui'
	export default {
		data(){
			return {
				indexId:1,
				shoplist:[]
			}
		},
		created(){
			this.getShop();
			// 监听滚动事件
			    
		},
		mounted(){
			var _this = this
			$(window).scroll(function(){
			　　var scrollTop = $(this).scrollTop();
			　　var scrollHeight = $(document).height();
			　　var windowHeight = $(this).height();
			　　if(scrollTop + windowHeight+5 > scrollHeight){
			　　　_this.indexId++;
				  _this.getShop(); 
			　　}
			})
		},
		methods: {
			getShop(){
				this.$http.get('api/getgoods?pageindex='+this.indexId).then((resolve)=>{
					if (resolve.body.status == 0) {
						if (resolve.body.message.length == 0) {
								$('.div-land').hide();
						}
						this.shoplist = this.shoplist.concat(resolve.body.message)
					} else{
						Toast('列表获取失败!')
					}
				},(reject)=>{
					Toast('网络错误!')
				})
			},
			enter(id){
				// this.$router.push('/home/shopInfo/'+id);
				this.$router.push({name:'shopinfo',params:{
					id
				}})
			}
			
		},
	}
</script>

<style lang="less" scoped>
	.boss{
		overflow: hidden;
		margin-bottom: 3em;
	}
	.box{
		width: 50%;
		float: left;
		padding: 5px 5px;
		min-height: 290px;
		
		.box-bs{
			box-shadow: 1px 1px 1px #888;
		}
		img{
			width: 100%;
		}
		h4{
			font-weight: 600;
			font-size: 15px;
			height: 43px;
			overflow: hidden;
		}
		
	}
	.price-one{
		color: red;
		font-size: 15px;
		margin-right: 10px;
		margin-left: 10px;
	}
	.price-two{
		color: #999999;
		font-size: 12px;
		text-decoration: line-through;
	}
	.price-lit{
		margin: 10px 10px;
		display: flex;
		color: #999999;
		justify-content: space-between;
		font-size: 12px;
		span{
			margin-bottom: 10px
		}
	}
	.link-box{
		background: #EDEDED;
		margin-top: 5px;
		padding-top: 10px;
		border: 2px solid white;
	}
	.div-land{
		text-align: center;
		width: 100%;
		overflow: hidden;
		.img-land{
			width: 15%;
		}
	}
	
</style>
